<template>
	<view id="page">
		<nav-bar :navH="navH" :isTabar="false" :isHome="false" :pageName="title"></nav-bar>
		<!-- 搜索条 -->
	    <view class='search clearfloat'>
			<view class="col-10 lt">
				<view class="col-3 icon">
					<image src='../../static/22.png' mode="widthFix" lazy-load="true"></image><text>#</text>
				</view>
				<view class="col-9 input">
					<input type='text' focus="true" @input="getKeywords" placeholder='请输入您要搜索的话题名称'></input>
				</view>
			</view>
			<view class="col-2 rt" @click="search">搜索</view>
	    </view>
	    <view class='topic' v-if="searchRes" style="background-color:#f4f4f4;">
			<text class='label'>共 {{searchLists.length}} 条结果</text>
			<block v-for="(it, k1) in searchLists" :key="k1">
				<view class='topic-list clearfloat' @click='selecTopic(it.id, it.topic_name)'>
					<view class='col-10'>
						<image :src="it.icon" mode="widthFix" lazy-load="true" @error="imgError(k1, 'ss')"></image>
						<view class='info'>
							<text style='font-size:30upx;'>{{it.topic_name}}</text>
							<view class='c'><text>评论数：<text style='color:#ef4d58;'>{{it.pl_num}}</text></text></view>
						</view>
					</view>
					<view class='col-2 narrow'><text>#话题</text></view>
				</view>
			</block>
			<view class="close" @click="close"></view>
	    </view>
	    <block v-else>
			<view v-if="hasRes">
				<text class='label'>热门推荐</text>
			    <view class='topic' v-if="lists.length > 0">
					<block v-for="(it, k2) in lists" :key="k2">
						<view class='topic-list clearfloat' @click='selecTopic(it.id, it.topic_name)'>
							<view class='col-10'>
								<image :src="it.icon" mode="widthFix" lazy-load="true" @error="imgError(k2, 'ls')"></image>
								<view class='info'>
									<text style='font-size:30upx;'>{{it.topic_name}}</text>
									<view class='c'><text>评论数：<text style='color:#ef4d58;'>{{it.pl_num}}</text></text></view>
								</view>
							</view>
							<view class='col-2 narrow'><text>#话题</text></view>
						</view>
					</block>
			    </view>
			    <view class="nocont" v-else>暂无话题</view>
			    <view class="nomore" v-if="isLoad"><image src='../../static/nomore_img.png' mode="widthFix"></image><text>没有更多了~</text></view>
			</view>
	    </block>
	</view>
</template>

<script>
	import app from '../../common/index.js'
	export default {
		data() {
			return {
				title: '话题选择',
				navH: null,
				userInfo: {},
				keys: '',
				searchRes: false,
				searchLists: [],
				hasRes: true,
				isLoad: false,
				page: 1,
				size: 10,
				lists: [],
			}
		},
		onLoad() {
			this.navH = this.$store.state.navHeight;
			// 获取本地用户信息
			this.userInfo = uni.getStorageSync('uinfo');
			this.getTopic();
		},
		// 上划加载
		onReachBottom() {
			if(!this.isLoad) {
				this.page = this.page+1;
				this.getTopic();
			}
		},
		methods: {
			/**
			 * @des 获取话题
			 */
			getTopic() {
				app.request({
					url: 'entry/wxapp/SelectTopic'
				}, (ret) => {
					let d = ret.data, tmpData = this.lists, len = d.data.length;
					if (d.total > 0) {
						this.hasRes = true;
						this.lists = tmpData.concat(d.data);
						this.isLoad = len < this.size ? true : false;
					} else {
						this.hasRes = false;
					}
				})
			},
			/**
			 * @des 触发搜索
			 */
			hover() {
				this.showSearch = true;
		    },
			/**
			 * @des 获取搜索关键词
			 */
		    getKeywords(e) {
				let val = e.detail.value;
				this.keys = val;
		    },
		    /**
			 * @des 搜索
			 */
		    search(e) {
				var keys = this.keys;
				if (keys) {
				  this.getSearch(keys)
				} else {
				  uni.showToast({
					title: '请输入关键字',
				  })
				}
		    },
			/**
			 * @des 获取搜索结果
			 */
			getSearch(key) {
				app.request({
					url: 'entry/wxapp/SearchTopic',
					data: {keywords: key}
				}, (ret) => {
					console.log(ret);
					let d = ret.data;
					if(d.total > 0) {
						this.searchLists = d.data;
						this.searchRes = true;
					}else {
						this.searchRes = false;
					}
				})
			},
			/**
			 * @des 关闭搜索结果
			 */
		    close() {
				this.searchRes = false;
		    },
			/**
			 * @des 选择话题跳回上页
			 */
		    selecTopic(id, name) {
				let topic = {
					tpid: id,
					tpname: name,
				};
				this.$store.commit('setTopic', topic);
				uni.navigateBack({
				  detla: 1
				})
		    },
			/**
			 * @des 处理错误图片
			 */
			imgError(k, t) {
				let tmpLists = this.lists, tmpSearchRes = this.searchLists;
				if(t === 'ls') {
					tmpLists[k].icon = '../../static/default.jpg';
					this.lists = tmpLists;
				}else if(t === 'ss') {
					tmpSearchRes[k].icon = '../../static/default.jpg';
					this.lists = tmpSearchRes;
				}
			}
		}
	}
</script>

<style>
	/* search */
	.search {position: relative; width: 100%; margin-bottom: 20upx; padding: 25upx 20upx; background-color: #f9f9f9; vertical-align: middle;}
	.search .lt {padding-right: 20upx; border-radius: 5px; text-align: left; line-height: 1; background-color: #e4e4e6; vertical-align: middle;}
	.search .lt .icon {padding: 0 10upx 0 30upx; vertical-align: middle;}
	.search .lt .icon image {width: 32upx; vertical-align: middle;}
	.search .lt .icon text {padding-left: 20upx; vertical-align: middle;}
	.search .lt .input {vertical-align: middle;}
	.search .lt .input input {height: 70upx; padding: 10upx 0; line-height: 1; font-size: 26upx;}
	.search .rt {text-align: right; line-height: 1; font-size: 30upx; color: #666;}
	/** 关闭搜索内容 */
	.close {position: relative; width: 52upx; height: 52upx; border-radius: 100%; margin: 100upx auto; background-color: #fff;}
	.close::before, .close::after {content: ''; position: absolute; top: 50%; left: 50%; width: 38upx; height: 2upx; background-color: #999;}
	.close::before {transform: translateX(-50%) rotate(45deg);}
	.close::after {transform: translateX(-50%) rotate(135deg);}
	/** 话题列表 */
	.label {display: block; width: 100%; padding: 20upx; border-bottom: 1px solid #ddd; font-size: 30upx; color: #666; background-color: #fff; text-align: left; vertical-align: middle;}
	.topic {margin-bottom: 20upx; text-align: left; background-color: #fff;}
	.topic .topic-list {padding: 20upx; border-bottom: 1px solid #eee; background-color: #fff; vertical-align: middle;}
	.topic .topic-list image {display: inline-block; width: 146upx; height: 146upx; vertical-align: middle;}
	.topic .topic-list .info {display: inline-block; vertical-align: middle; line-height: 1; margin-left: 30upx;}
	.topic .topic-list .info .c {padding-top: 16upx;}
	.topic .topic-list .info .c text {margin-right: 50upx; font-size: 28upx; color: #666;}
	.topic .topic-list .narrow {display: inline-block; padding: 0 10upx; text-align: right;}
	.topic .topic-list .narrow image {width: 22upx; height: 32upx;}
</style>
